import {
  getToolInfoByPage,
  addToolInfo,
  updateToolInfo,
  delToolInfo,
  exportToolInfo,
  getCategoryDict,
  addToolFile,
  delToolFile,
  exportToolFile,
  getToolFileByPage,
  updateToolFile,
  uploadToolFile,
} from '@/services/device/toolInfo';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import moment from 'moment';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
import {
  message,
  Modal,
  Tree,
  Button,
  Cascader,
  Checkbox,
  DatePicker,
  Form,
  Row,
  Col,
  Input,
  InputNumber,
  Tooltip,
  Upload,
} from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import {
  ModalForm,
  ProFormDatePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTimePicker,
} from '@ant-design/pro-components';
import './style.less';
import { isNumber } from 'lodash';
import { Ellipsis } from '@/components/Ellipsis';
const ToolInfo: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable‘
  const [createOrUpdate1, setCreateOrUpdate1] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const [toolOption, setToolOption] = useState([]);
  const [inspectTemplateId, setInspectTemplateId] = useState(); //工具台账详细页关联工具台账id
  const ref = useRef(null);
  const actionRef_file = useRef<ActionType>();
  const [modalVisit4, setModalVisit4] = useState(false); // 上传附件
  const [modalVisit_file, setModalVisit_file] = useState(false); // 上传附件
  const [confirmLoading4, setConfirmLoading4] = useState(false);
  const [confirmLoading_file, setConfirmLoading_file] = useState(false);
  const [formTitle4, setFormTitle4] = useState('新建'); //
  const [formTitle_file, setFormTitle_file] = useState(''); //
  const [file, setFile] = useState();
  const [itemId, setItemId] = useState('');
  const fileInfo = {
    toolinfoId: '',
    // multipartFile: '',
    fileName: '',
    memo: '11',
  };
  /* 工具台账有效标记颜色tag组件 */
  const IsValidColorTag = ({ isBlue, text }) => {
    const tagStyle = {
      textalign: 'center',

      width: '50px',
      height: '27px',
      padding: '5px',
      borderRadius: '3px',
      color: 'white',
      fontSize: '10px',
      backgroundColor: '#13c2c2',
    };
    if (isBlue) {
      tagStyle.backgroundColor = '#13c2c2';
    } else {
      tagStyle.backgroundColor = '#DC6C76';
    }
    return <div style={tagStyle}>{text}</div>;
  };
  /* 工具台账任务类型颜色tag组件 */
  const InfoTypeColorTag = ({ text }) => {
    const tagStyle = {
      textalign: 'center',

      width: '50px',
      height: '27px',
      padding: '5px',
      borderRadius: '3px',
      color: 'white',
      fontSize: '10px',
      backgroundColor: '#13c2c2',
    };
    if (text === '主动') {
      tagStyle.backgroundColor = '#13c2c2';
    } else {
      tagStyle.backgroundColor = '#DC6C76';
    }
    return <div style={tagStyle}>{text}</div>;
  };
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      align: 'center',
      sorter: true,
    },
    /* {
      title: '唯一标识',
      dataIndex: 'identification',
    }, */
    {
      title: '工具名称',
      align: 'center',
      sorter: true,

      ellipsis: true,
      width: 150,
      dataIndex: 'toolName',
    },
    {
      title: '工具编号',
      dataIndex: 'toolId',
      width: 150,
      onCell: () => {
        return {
          style: {
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer',
          },
        };
      },
      render: (text) => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
      align: 'center',
      sorter: true,
    },
    {
      title: '规格型号',
      align: 'center',
      sorter: true,

      width: 150,
      onCell: () => {
        return {
          style: {
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer',
          },
        };
      },
      render: (text) => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
      dataIndex: 'toolType',
      search: false,
    },
    {
      title: '品牌',
      align: 'center',
      sorter: true,

      width: 150,
      onCell: () => {
        return {
          style: {
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer',
          },
        };
      },
      render: (text) => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
      dataIndex: 'manufacturer',
      search: false,
    },
    {
      title: '计划寿命(年)',
      width: 120,
      dataIndex: 'planedLife',
      hideInSearch: true,
      search: false,

      align: 'center',
      sorter: true,
      /* render: (text, record, _, action) => {
        let aaa = 'red';
        if (record.remainingLife + record.usedLife < record.planedLife) aaa = 'black';
        return <div style={{ color: aaa }}>{record.planedLife}</div>;
      }, */
    },
    {
      title: '使用寿命(年)',
      dataIndex: 'usedLife',
      search: false,
      width: 120,
      hideInSearch: true,
      align: 'center',
      sorter: true,

      /* render: (text, record, _, action) => {
        let aaa = 'red';
        if (record.remainingLife + record.usedLife < record.planedLife) aaa = 'black';
        return <div style={{ color: aaa }}>{record.usedLife}</div>;
      }, */
    },
    {
      title: '剩余寿命(年)',
      align: 'center',
      sorter: true,

      width: 120,
      search: false,
      dataIndex: 'remainingLife',
      hideInSearch: true,
      /* render: (text, record, _, action) => {
        let aaa = 'red';
        if (record.remainingLife + record.usedLife < record.planedLife) aaa = 'black';
        return <div style={{ color: aaa }}>{record.remainingLife}</div>;
      }, */
    },

    {
      title: '数量（件）',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'qty',
      hideInSearch: true,
    },
    {
      title: '工具状态',
      search: false,
      align: 'center',
      sorter: true,

      width: 120,
      dataIndex: 'toolState',
    },
    {
      title: '领用日期',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'takeawayDate',
      renderFormItem: () => {
        return <ProFormDatePicker name="takeawayDate" />;
      },
    },
    {
      title: '报废日期',
      align: 'center',
      sorter: true,

      width: 120,
      search: false,
      dataIndex: 'scrappedDate',
      renderFormItem: () => {
        return <ProFormDatePicker name="scrappedDate" />;
      },
    },
    {
      title: '存储位置',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'location',
    },
    {
      title: '联系人',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'contact',
    },
    {
      title: '领用人',
      search: false,
      align: 'center',
      sorter: true,

      width: 120,
      dataIndex: 'telephone',
    },
    {
      title: '部门',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'dept',
    },
    {
      title: '工号',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,

      dataIndex: 'employeeId',
    },
    {
      title: '成本中心',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'costcenter',
    },
    {
      title: '工具类别',
      align: 'center',
      sorter: true,

      search: false,
      width: 120,
      dataIndex: 'category',
    },
    /* {
      title: '采购编号',
     align: 'center',sorter: true, 

      search: false,
      dataIndex: 'contractId',
    },
    {
      title: '采购日期',
     align: 'center',sorter: true, 

      search: false,
      dataIndex: 'contractDate',
      renderFormItem: () => {
        return <ProFormDatePicker name="contractDate" />;
      },
    }, */
    {
      title: '操作',
      align: 'center',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 200,
      render: (text, record, _, action) => [
        <a
          key="uploadFile"
          onClick={() => {
            setItemId(record.id);
            setFormTitle_file('新建');
            setModalVisit_file(true);
          }}
        >
          查看附件
        </a>,
        <a
          key="editKey"
          onClick={() => {
            setModalVisit(true);
            setCreateOrUpdate(false);
            setCreateOrUpdate1(true);
            setFormTitle('编辑');
            form.setFieldsValue({
              identification: record.identification,
              toolName: record.toolName,
              toolId: record.toolId,
              toolType: record.toolType,
              manufacturer: record.manufacturer,
              planedLife: record.planedLife,
              usedLife: record.usedLife,
              remainingLife: record.remainingLife,
              qty: record.qty,
              toolState: record.toolState,
              takeawayDate: moment(record.takeawayDate),
              scrappedDate: moment(record.scrappedDate),
              location: record.location,
              contact: record.contact,
              telephone: record.telephone,
              dept: record.dept,
              employeeId: record.employeeId,
              costcenter: record.costcenter,
              category: record.category,
              contractId: record.contractId,
              ducontractDateeTime: moment(record.contractDate),
              id: record.id,
            });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delToolInfo({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  const handleSubmit = async (values) => {
    setConfirmLoading(true);
    console.log('表单提交的信息', values);
    if (
      isNumber(values.usedLife) &&
      isNumber(values.remainingLife) &&
      isNumber(values.planedLife)
    ) {
      if (Number(values.usedLife) + Number(values.remainingLife) <= Number(values.planedLife)) {
        console.log('工具台账信息：', values);
        if (formTitle == '新建') {
          const result = await addToolInfo(values);
          if (result != null) {
            message.success('添加成功');
          }
        } else {
          const resultUpdate = await updateToolInfo(values);
          console.log('修改数据的结果', resultUpdate);
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
      } else {
        message.error('使用寿命加剩余寿命不能大于计划寿命！');
      }
    } else {
      message.error('设备寿命输入类型只能为整数或小数！');
    }
  };
  //附件查看
  const fileCol: ProColumns[] = [
    {
      title: '序号',
      align: 'center',
      sorter: true,

      dataIndex: 'index',
      valueType: 'index',
      width: 60,
    },
    /* {
        title: '唯一标识',
        dataIndex: 'identification',
        hideInTable: true,
      }, */
    {
      title: '文件名',
      align: 'center',
      sorter: true,

      dataIndex: 'fileName',
      width: 150,
    },
    {
      title: '备注',
      align: 'center',
      sorter: true,

      dataIndex: 'memo',
      search: false,
      width: 200,
      onCell: () => {
        return {
          style: {
            maxWidth: 100,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            cursor: 'pointer',
          },
        };
      },
      render: (text) => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',
      width: 90,

      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      width: 90,
      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',

      width: 120,
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="previewKey"
          onClick={() => {
            window.open(record.fileUrl);
            actionRef_file.current!.reload();
          }}
        >
          预览下载
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delToolFile({ id: record.id });
                actionRef_file.current!.reload();
              },
            });
          }}
        >
          删除附件
        </a>,
      ],
    },
  ];
  const handleClose = async () => {
    setModalVisit_file(false);
  };

  const onFilesChange = async (file) => {
    setFile(file);
  };
  const beforeUpload = (file, fileList) => {
    setFile(file);
    if (fileList.length >= 1) {
      return false; // 阻止上传
    }
    return true; // 允许上传
  };

  //上传附件
  const handleFile = async () => {
    setConfirmLoading4(true);
    console.log('开始上传');
    if (formTitle4 == '新建') {
      form
        .validateFields()
        .then(async (value) => {
          if (file == undefined) message.error('请上传文件！');
          if (file.size / 1024 / 1024 < 100) {
            const info = form.getFieldsValue();
            const formData1 = new window.FormData();
            info.file.fileList.map((file: any) => {
              formData.append('file', file.originFileObj);
            });
            fileInfo.file = formData1;
            fileInfo.fileName = info.file.file.name;
            fileInfo.toolinfoId = itemId;
            const result = await uploadToolFile(fileInfo);
            console.log(fileInfo, '成了吗', result);
            if (result != null) {
              message.success('添加成功');
            }
            setFile(undefined);
            setConfirmLoading4(false);
            setModalVisit4(false);
            actionRef_file.current!.reload();
          } else {
            setConfirmLoading4(false);
            message.info('文件大小不能超过100MB!');
          }
          //form.resetFields();
        })
        .catch((err) => {
          setConfirmLoading4(false);
        });
    } /* else {
        form
          .validateFields()
          .then(async () => {
            const res = form.getFieldsValue();
            res.file = new FormData();
            res.infoId = optionsProName.find(
              () => optionsProName.label === form.getFieldsValue.projectName,
            ).value;
            if (file != null) {
              const formData = new window.FormData();
              formData.append('file', file);
              res.file = formData;
            }
            const result = await updateFileInfo(res);
            if (result != null) {
              message.success('修改成功！');
            }
            setConfirmLoading(false);
            setModalVisit(false);
            actionRef.current!.reload();
          })
          .catch(() => {
            setConfirmLoading4(false);
          });
      } */
  };
  const handlestandManufactWorkHourChange = (value: any) => {
    if (value && !isNaN(value)) {
      const formattedValue = value
        .replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
        .replace(/^\./g, '');
      console.log(formattedValue);
      form.setFieldsValue({ standManufactWorkHour: formattedValue });
    }
  };
  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="工具台账查询"
        search={tableSearchPublicConfig}
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateOrUpdate(false);
              setFormTitle('新建');
              form.resetFields();
              setModalVisit(true);
            }}
            type="primary"
          >
            新建
          </Button>,
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              const filters = filterTran(ref.current.getFieldsValue());
              exportToolInfo({
                current: 1,
                pageSize: 5000,
                filters: filters,
              }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `ToolInfo.xls`);
                aLink.click();
                document.body.removeChild(aLink);
              });
            }}
            type="primary"
          >
            导出
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTran(params);
          const result = await getToolInfoByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          const info = await getCategoryDict();
          const temp = [];
          console.log('收到的设备类型信息：', info);
          info.data.map((item: any) => {
            if (item != null) {
              temp.push({ id: item, value: item });
            }
          });
          setToolOption(temp);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
      />
      {/* 工具台账新建表单 */}
      <ModalForm
        layout="horizontal"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setModalVisit(false);
          },
        }}
      >
        {/* <ProFormText
          name="identification"
          label="唯一标识"
          rules={[{ required: true, message: '请输入 your identification!' }]}
          disabled={createOrUpdate}
        /> */}
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="identification"
          label="identification"
          placeholder="请输入名称"
          initialValue={1}
          hidden={true}
        />
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="toolName"
              label="工具名称"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入工具名称!' }]}
            />
          </Col>
          <Col span={12}>
            <ProFormText
              name="toolId"
              label="工具编号"
              disabled={createOrUpdate1}
              rules={[{ required: true, message: '请输入工具编号!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText name="toolType" label="规格型号" disabled={createOrUpdate} />
          </Col>
          <Col span={12}>
            <ProFormText name="manufacturer" label="品牌" disabled={createOrUpdate} />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <Form.Item
              label="计划寿命"
              name="planedLife"
              rules={[{ required: true, message: '请输入计划寿命!' }]}
            >
              <InputNumber
                addonAfter="年"
                step={1}
                min={0}
                max={99999}
                style={{ width: '100%' }}
                // onChange={(e) => handlestandManufactWorkHourChange(e.target.value)}
              />
            </Form.Item>
            {/* <ProFormText
              name="planedLife"
              label="计划寿命"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入!' }]}
            /> */}
          </Col>
          <Col span={12}>
            <Form.Item
              label="使用寿命"
              name="usedLife"
              rules={[{ required: true, message: '请输入使用寿命!' }]}
            >
              <InputNumber
                addonAfter="年"
                min={0}
                max={99999}
                step={1}
                style={{ width: '100%' }}
                // onChange={(e) => handlestandManufactWorkHourChange(e.target.value)}
              />
            </Form.Item>
            {/* <ProFormText
              name="usedLife"
              label="使用寿命"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入!' }]}
            /> */}
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <Form.Item
              label="剩余寿命"
              name="remainingLife"
              min={0}
              max={99999}
              style={{ width: '100%' }}
              rules={[{ required: true, message: '请输入剩余寿命!' }]}
            >
              <InputNumber
                addonAfter="年"
                step={1}
                style={{ width: '100%' }}

                // onChange={(e) => handlestandManufactWorkHourChange(e.target.value)}
              />
            </Form.Item>
            {/*  <ProFormText
              name="remainingLife"
              label="剩余寿命"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入!' }]}
            /> */}
          </Col>
          <Col span={12}>
            <Form.Item
              label="数量"
              name="qty"
              style={{ width: '100%' }}
              rules={[{ required: true, message: '请输入数量!' }]}
            >
              <InputNumber
                addonAfter="件"
                style={{ width: '100%' }}
                min={0}
                max={99999}
                step={1}
                // onChange={(e) => handlestandManufactWorkHourChange(e.target.value)}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="toolState"
              label="工具状态"
              valueEnum={{
                已领出: '已领出',
                已报废: '已报废',
                正常: '正常',
              }}
              disabled={createOrUpdate}
            />
          </Col>
          <Col span={12}>
            <ProFormDatePicker
              name="takeawayDate"
              label="领用日期"
              width={'100%'}
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请选择领用日期!' }]}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormDatePicker
              name="scrappedDate"
              label="报废日期"
              width={'100%'}
              disabled={createOrUpdate}
            />
          </Col>
          <Col span={12}>
            <ProFormText name="location" label="存储位置" disabled={createOrUpdate} />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText name="contact" label="联系人" disabled={createOrUpdate} />
          </Col>
          <Col span={12}>
            <ProFormText name="recipients" label="领用人" disabled={createOrUpdate} />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText name="dept" label="部门" disabled={createOrUpdate} />
          </Col>
          <Col span={12}>
            <ProFormText name="employeeId" label="工号" disabled={createOrUpdate} />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText name="costcenter" label="成本中心" disabled={createOrUpdate} />
          </Col>
          <Col span={12}>
            <ProFormSelect
              name="category"
              label="工具类别"
              options={toolOption}
              disabled={createOrUpdate}
            />
          </Col>
        </Row>
        <Row gutter={[50, 0]}>
          <Col span={12}>
            <ProFormText
              name="contractId"
              label="采购编号"
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请输入采购编号!' }]}
            />
          </Col>
          <Col span={12}>
            <ProFormDatePicker
              name="contractDate"
              label="采购日期"
              width={'100%'}
              disabled={createOrUpdate}
              rules={[{ required: true, message: '请选择采购日期!' }]}
            />
          </Col>
        </Row>
      </ModalForm>
      {/* 附件弹窗 */}
      <Modal
        title={formTitle4}
        visible={modalVisit4}
        onOk={handleFile}
        confirmLoading={confirmLoading4}
        onCancel={() => setModalVisit4(false)}
        destroyOnClose
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="left"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item
            label="附件"
            name="file"
            rules={[{ required: true, message: '请选择待上传文件！' }]}
          >
            <Upload
              //listType="picture-card"
              file-list="fileList"
              customRequest={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
              showUploadList={true}
              multiple
              beforeUpload={beforeUpload}
            >
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>
          <Form.Item label="备注" name="memo" rules={[{ required: true, message: '请输入备注！' }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
      {/* 附件table弹窗 */}
      <ModalForm
        form={form}
        title={formTitle_file}
        visible={modalVisit_file}
        width={1200}
        onFinish={handleClose}
        // confirmLoading={confirmLoading_file}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setModalVisit_file(false);
          },
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="identification"
          label="唯一标识"
          rules={[{ required: true, message: '请输入唯一标识!' }]}
          disabled={createOrUpdate}
          initialValue={111}
          hidden={true}
        />
        <ProTable
          headerTitle="附件信息"
          actionRef={actionRef_file} //用于触发刷新操作等，看api
          rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
          formRef={ref}
          search={false}
          /* search={{
            labelWidth: 100,
            defaultCollapsed: true,
          }} */
          toolBarRender={(action, { selectedRows }) => [
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                setFormTitle4('新建');

                setModalVisit4(true);
              }}
              type="primary"
            >
              新建
            </Button>,
            /*  <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                const filters = filterTran(ref.current.getFieldsValue());
                exportToolItem({
                  current: 1,
                  pageSize: 5000,
                  filters: filters,
                }).then((res) => {
                  const aLink = document.createElement('a');
                  document.body.appendChild(aLink);
                  aLink.style.display = 'none';
                  aLink.href = window.URL.createObjectURL(res);
                  aLink.setAttribute('download', `ToolItem.xls`);
                  aLink.click();
                  document.body.removeChild(aLink);
                });
              }}
              type="primary"
            >
              导出
            </Button>, */
          ]}
          request={async (params = {}, sort, filter) => {
            const res = { ...params };
            const sorters = sortTran(sort);
            const filters = filterTran(res);
            const result = await getToolFileByPage({
              ...params,
              sorters: sorters,
              filters: filters,
            });
            //getproductbop();
            //过滤后端传递的null数据
            console.log('获得的文件信息', result);
            const tableinfo2: any[] = [];
            result.data.content.map((item: any, index: number) => {
              if (item != null && item.toolinfoId == itemId) {
                tableinfo2.push(item);
              }
            });
            console.log('应该显示的文件信息啊', tableinfo2);
            return {
              data: tableinfo2,
              total: tableinfo2.length,
              success: result.success,
            };
          }}
          columns={fileCol}
          scroll={{ x: 2000, y: 450 }}
          rowSelection={{}}
        />
      </ModalForm>
    </PageHeaderWrapper>
  );
};
export default ToolInfo;
